<template>
  <div id="task">
    <group class="timeTask_box">
      <div class="task_title">
        <h3>奖励领取记录</h3>
      </div>
      <x-table :cell-bordered="false" :content-bordered="false" class="taskRecord">
        <thead>
            <tr>
                <th width="30%">任务编号</th>
                <th width="25%">奖励</th>
                <th width="40%">领取时间</th>
            </tr>
        </thead>
      </x-table>
      <div class="task_tab">
        <x-table :cell-bordered="false" :content-bordered="false" class="taskRecord">
            <tbody>
            <tr v-for="reward in rewardlist" :key="reward.id">
                <td width="30%">{{reward.task_title}}</td>
                <td width="25%">房卡*{{reward.reward_number}}张</td>
                <td width="40%">{{reward.time}}</td>
            </tr>
            </tbody>
        </x-table>
      </div>
    </group>
  </div>
</template>

<script>
import { Group, XTable } from "vux";
import { timestamp_switch_time } from "../../../scripts/utils";
export default {
  data() {
    return {
      rewardlist: [] //任务奖励记录
    };
  },
  created() {
    this.getRewardList()
  },
  components: {
    Group,
    XTable
  },
  methods: {
    getRewardList(){
      this.apiService.Task.getrewardlist().then(res => {
        this.rewardlist = res.data.rewardlist;
        this.rewardlist.forEach((r)=>{
          r.time = timestamp_switch_time(r.recive_time)
        })
      })
    }
  }
};
</script>
<style scoped>
#task {
  height: 100%;
}
.task_title {
  padding: 0.25rem 0.2rem;
  overflow: hidden;
  position: relative;
}
.task_title h3 {
  font-size: 0.3rem;
  float: left;
}
.task_title::after {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  color: #d9d9d9;
  bottom: 0;
  border-bottom: 1px solid #d9d9d9;
  transform-origin: 0 100%;
  transform: scaleY(0.5);
}
.taskRecord {
  font-size: 0.26rem;
}
.taskRecord th {
  font-size: 0.3rem;
  font-weight: 600;
}
.taskRecord::after,
.taskRecord th::before,
.taskRecord td::before {
  border: none !important;
}
</style>
<style>
#task .timeTask_box .weui-cells {
  margin: 0;
}
#task .task_tab {
  overflow: auto;
}
</style>

